<html>
    <head>
        <title>Itowns - Orthographic Camera Example</title>

        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/example.css">
        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="viewerDiv"></div>
        <span id="divScaleWidget"> Scale </span>

        <script src="../dist/itowns.js"></script>
        <script src="js/GUI/LoadingScreen.js"></script>
        <script src="js/Scale.js"></script>
        <script type="text/javascript">
            // # Orthographic viewer

            // Define geographic extent: CRS, min/max X, min/max Y
            var extent = new itowns.Extent(
                'EPSG:3857',
                -20026376.39, 20026376.39,
                -20048966.10, 20048966.10);

            // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
            var viewerDiv = document.getElementById('viewerDiv');

            // Instanciate PlanarView
            // By default itowns' tiles geometry have a "skirt" (ie they have a height),
            // but in case of orthographic we don't need this feature, so disable it
            var view = new itowns.PlanarView(viewerDiv, extent, { disableSkirt: true, maxSubdivisionLevel: 10,
                camera: { type: itowns.CAMERA_TYPE.ORTHOGRAPHIC },
                placement: new itowns.Extent('EPSG:3857', -20000000, 20000000, -8000000, 20000000),
                controls: {
                    // Faster zoom in/out speed
                    zoomFactor: 3,
                    // prevent from zooming in too much
                    maxResolution: 0.005  // a pixel shall not represent a metric size smaller than 5 mm
                },
            });

            setupLoadingScreen(viewerDiv, view);

            // Add a TMS imagery source
            var opensmSource = new itowns.TMSSource({
                isInverted: true,
                // eslint-disable-next-line no-template-curly-in-string
                url: 'http://c.tile.stamen.com/watercolor/${z}/${x}/${y}.jpg',
                networkOptions: { crossOrigin: 'anonymous' },
                extent,
                crs: 'EPSG:3857',
                attribution: {
                    name: 'OpenStreetMap',
                    url: 'http://www.openstreetmap.org/',
                },
            });

            // Add a TMS imagery layer
            var opensmLayer = new itowns.ColorLayer('OPENSM', {
                updateStrategy: {
                    type: itowns.STRATEGY_DICHOTOMY,
                },
                source: opensmSource,
            });

            view.addLayer(opensmLayer);

            // Initialize scale :
            const initialScaleSize = 200;  // in pixel
            const divScaleWidget = document.getElementById('divScaleWidget');
            function updateScaleWidget() {
                let computedScale = roundPixelsFromMeters(view, initialScaleSize);
                let format = getMetersUnit(computedScale.meters);
                divScaleWidget.innerHTML = `${format.distance} ${format.unit}`;
                divScaleWidget.style.width = `${computedScale.pixels}`;
            }
            // Updates scale when needed :
            view.addEventListener(itowns.VIEW_EVENTS.INITIALIZED, function () {
                // eslint-disable-next-line no-console
                console.info('View initialized');
                updateScaleWidget();
            });
            view.addEventListener(itowns.PLANAR_CONTROL_EVENT.MOVED, function () {
                updateScaleWidget();
            })

            // Request redraw
            view.notifyChange();
        </script>
    </body>
</html>
